<template>
	<view class="identity">

		<view class="img-upload">
			<view class="top-tips">
				*图片限10M以内
			</view>
			<view class="flex-space-between">
				<view class="img-upload-item">
					<view class="title">
						门头照
					</view>
					<view class="box-image" @click="chooseImg(10)">
						<image class="bg-image"
							:src="shopGateImage ? shopGateImage : require('@/common/images/identification/img-id-photo-png.png')"
							mode="aspectFill"></image>
						<view class="add">+</view>
						<view class="bottom">
							点击上传门头照
						</view>
					</view>
				</view>
				<view class="img-upload-item">
					<view class="title">
						经营场所照
					</view>
					<view class="box-image" @click="chooseImg(11)">
						<image class="bg-image"
							:src="shopInsideImage ? shopInsideImage : require('@/common/images/identification/img-national-emblem-png.png')"
							mode="aspectFill"></image>
						<view class="add">+</view>
						<view class="bottom">
							点击上传经营场所照
						</view>
					</view>
				</view>
			</view>
			<view class="flex-space-between">
				<view class="img-upload-item">
					<view class="title">
						收银台照
					</view>
					<view class="box-image" @click="chooseImg(13)">
						<image class="bg-image"
							:src="cashDeskImage ? cashDeskImage : require('@/common/images/identification/img-id-photo-png.png')"
							mode="aspectFill"></image>
						<view class="add">+</view>
						<view class="bottom">
							点击上传收银台照
						</view>
					</view>
				</view>
				<view class="img-upload-item" v-show="licensePicShow">
					<view class="title">
						营业执照
					</view>
					<view class="box-image" @click="chooseImg(18)">
						<image class="bg-image"
							:src="businessCreditLicenseImage ? businessCreditLicenseImage : require('@/common/images/identification/img-id-photo-png.png')"
							mode="aspectFill"></image>
						<view class="add">+</view>
						<view class="bottom">
							点击上传营业执照
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="form">

			<!-- <view class="item">
				<text class="text">所在地区</text>
				<uni-data-picker split=" " class="area-picker" :localdata="areaData"
					:popup-title="form.areaText ? form.areaText : '请选择城市'" @change="changeArea">
					{{ form.areaText }}
				</uni-data-picker>
			</view> -->
			<view class="item">
				<text class="text">商户类型</text>
				<view class="" @click="merchantShow=true">
						{{ form.merchantText  ? form.merchantText :'个人'}}
						<i class="iconfont icon-Downarrow-R"></i>
						<u-picker mode="selector" v-model="merchantShow" :range="merchantList" range-key="merchantName" @confirm="merchantConfirm($event)"></u-picker>
				</view>
			</view>
			<view class="item">
				<text class="text">所属行业</text>
				<view class="" @click="mccShow=true">
					{{ form.mccText  ? form.mccText :'请选择行业'}}
					<i class="iconfont icon-Downarrow-R" @click="selectMcc"></i>
				</view>
				<u-picker mode="selector" v-model="mccShow" :range="mccList" range-key="mccName"
					@confirm="mccConfirm"></u-picker>
			</view>
			<view class="item">
				<text class="text">所在地区</text>
				<view class="" @click="areaShow=true">
					<picker mode="multiSelector" :value="areaIndex" :range="pickerRange" @columnchange="columnchange"
						range-key="name" @change="onChange">
						{{ form.areaText }}
						<i class="iconfont icon-Downarrow-R"></i>
					</picker>
					<!-- <picker @change="onChange"  :value="areaIndex" :range="pickerRange"  mode="multiSelector">
					</picker> -->
				</view>
			</view>
			<view class="item">
				<text class="text">详细地址</text>
				<textarea auto-height class="input" placeholder="请输入详细地址（不包含省市区）" v-model="form.manageAddr"
					type="text" />
			</view>
			<view class="item">
				<text class="text">经营名称</text>
				<textarea auto-height class="input" placeholder="请输入5-20个字的经营名称" v-model="form.businessLicenseName"
					type="text" />
			</view>
			<view class="item" v-show="licenseNoShow">
				<text class="text">社会统一信用码</text>
				<textarea auto-height class="input" placeholder="请输入社会统一信用码" v-model="form.businessLicenseNo"
					type="text" />
			</view>
			<view class="item" v-show="licenseStartDateShow">
				<text class="text">营业执照开始日期</text>
				<picker class="input" mode="date" fields="day" :value="form.businessLicenseStartDate" @change="pickerConfirmHandleMerchant($event, 1)">
					<view class="uni-input">{{ form.businessLicenseStartDate ? form.businessLicenseStartDate : '请选择' }}</view>
				</picker>
			</view>
			<view class="item" v-show="licenseEndDateShow">
				<text class="text">营业执照结束日期</text>
				<picker class="input" mode="date" fields="day" :value="form.businessLicenseEndDate" @change="pickerConfirmHandleMerchant($event, 2)">
					<view class="uni-input">{{ form.businessLicenseEndDate ? form.businessLicenseEndDate : '请选择' }}</view>
				</picker>
			</view>
			<view class="item" v-show="licenseAddressShow">
				<text class="text">营业执照经营地址</text>
				<textarea auto-height class="input" placeholder="请输入营业执照经营地址" v-model="form.businessLicenseAddress"
					type="text" />
			</view>
			<view class="tips">
				*我们承诺此信息只用于验证您的身份，我们将严格保管加密您的信息
			</view>
			<view class="card-btn flex-space-between">
				<view class="button next" @click="backSubmit" v-if="type == 1">上一步</view>
				<view class="button next" @click="merchantSubmit">下一步</view>
			</view>
		</view>

		<w-compress ref="wCompress2" />
	</view>
</template>

<script>
	import areaData from '_c/utils/area2';
	import {
		informationQuery,
		queryCustomer
	} from '_a/user';
	import uploadImgMixin from '@/mixins/uploadImg';
	// import { editCard, editCardList } from '_a/home';
	import {
		getProvinceApi,
		getProvinceList,
		getMerchMcc,
		getAreaApi,
		getCityApi
	} from '_a/home';

	export default {
		mixins: [uploadImgMixin],
		props: {
			formData: {},
			type: {
				default: 1,
			},
			res: null
		},
		data() {
			return {
				form: {
					mercPro: '',
					mercCity: '',
					mercArea: '',
					manageAddr: '',
					mercProName: '',
					mercCityName: '',
					mercAreaName: '',
					businessLicenseName: '',
					businessLicenseNo: '',
					businessLicenseStartDate: '',
					businessLicenseEndDate: '',
					businessLicenseAddress: '',
					mccCode: '',
					merchantType: 1, //1小微 3： 企业 前端先写死传1过来。
					merchantText:"个人",
					areaText: "请选择地区",
					mccText: "请选择行业",
					merchantAddress: "请选择地区",
				},
				shopGateImage: "", //门头照
				shopInsideImage: "", //经营场所
				cashDeskImage: "", //收银台
				businessCreditLicenseImage: "", //营业执照图片
				// areaData: "",
				areaData: areaData,
				areaShow: false,
				mccShow: false,
				merchantShow: false,
				licensePicShow: false,
				licenseNoShow: false,
				licenseStartDateShow: false,
				licenseEndDateShow: false,
				licenseAddressShow: false,
				mccList: [],
				merchantList: [],
				provinceList: [],
				cityApiList: [],
				areaApiList: [],
				pickerRange: [
					[],
					[],
					[]
				],
				areaIndex: [0, 0, 0],
				channelCode:''
			};
		},
		async created() {

		},
		computed: {
			// 是否机具扫码进入
			terminalInto() {
				return this.$store.getters.terminalInto || false
			}
		},
		onLoad(option) {},
		methods: {
			handleInput(event) {
				let value = event.target.value;
				let newValue = value.replace(/[^\d\w\u4e00-\u9fa5]/g, '');
				this.form.businessLicenseName = newValue
				this.$forceUpdate()
			},
			async loadingInfo() {
				
				const scanSerialno = this.$storage.getStore('serialno');
				
				let result = await queryCustomer({scanSerialno});
				this.res = result.data;
				let merchantFormData = this.$storage.getStore('merchantFormData') || {};
				console.log({
					merchantFormData
				});
				this.form = merchantFormData;
				
				await this.initAddressData();
				await this.getData();
			},
			// 获取地址接口信息
			async initAddressData() {
				const addressData = this.areaData;
				this.pickerRange[0] = await this.getProvinceApiData(this.channelCode);
				this.pickerRange[1] = await this.getCityApiData(this.pickerRange[0][0].code, this.channelCode);
				this.pickerRange[2] = await this.getAreaApiData(this.pickerRange[1][0].code, this.channelCode);
			},
			// 地址每列选择
			async columnchange(event) {
				let {
					column,
					value
				} = {
					...event.detail
				};
				
				if (column == 0) {
					this.pickerRange[1] = await this.getCityApiData(this.pickerRange[0][value].code, this.channelCode);
					this.pickerRange[2] = await this.getAreaApiData(this.pickerRange[1][0].code, this.channelCode);
					this.$set(this.areaIndex, column, value);
				}
				if (column == 1) {
					this.pickerRange[2] = await this.getAreaApiData(this.pickerRange[1][value].code, this.channelCode);
					this.$nextTick(() => {
						this.areaIndex[2] = 0;
					});
				}
				await this.$forceUpdate();
			},
			pickerConfirmHandleMerchant(e, type) {
				this.merchantShow=true;
				if(type==1){
					this.form.businessLicenseStartDate = e.detail.value;
				}
				if(type==2){
					this.form.businessLicenseEndDate = e.detail.value;
				}
				this.merchantShow=false;
				console.log("this.form", this.form);
			},
			// 地址选择确定
			onChange(e) {
				const index = e.detail.value;
				// this.areaIndex = e.detail.value;
				this.form.mercPro = String(this.pickerRange[0][index[0]].code);
				this.form.mercCity = this.pickerRange[1][index[1]].code;
				this.form.mercArea = this.pickerRange[2][index[2]].code;

				this.form.mercProName = this.pickerRange[0][index[0]].name;
				this.form.mercCityName = this.pickerRange[1][index[1]].name;
				this.form.mercAreaName = this.pickerRange[2][index[2]].name;
				this.form.areaText = this.form.mercProName + '-' + this.form.mercCityName + '-' + this.form.mercAreaName
				this.$forceUpdate();
				// // 更新城市数据
				// if (this.pickerRange[1].length === 0 || this.pickerRange[1][0] !== this.selectedProvince) {
				// 	this.pickerRange[1] = addressData.city[this.selectedProvince];
				// }
				// // 更新区域数据
				// if (this.pickerRange[2].length === 0 || this.pickerRange[2][0] !== this.selectedCity) {
				// 	this.pickerRange[2] = addressData.area[this.selectedCity];
				// }
			},
			selectMcc() {
				this.areaShow = true;
			},
			async getData() {
				// 获取信息数据
				// getProvinceList().then(res => {
				// 	this.areaData = this.getProvince(res.data);
				// })
				
				let res = this.res;
				//alert(res.merchantType);
				const merchType = res.merchantType;
				const channelCode = res.channelCode;
				await getMerchMcc({merchType, channelCode}).then(res => {
					this.mccList = res.data
				});
				this.merchantList = [{merchantType:'1',merchantName:"个人"},{merchantType:'3',merchantName:"企业"}];
				const mccIndex = this.mccList.findIndex((el) => el.mccCode === res.mccCode);
				if (res) {
					this.shopInsideImage = res.shopInsidePlacePic;
					this.shopGateImage = res.shopGatePic;
					this.cashDeskImage = res.cashierDeskPic;
					this.businessCreditLicenseImage = res.businessCreditLicensePic;
					this.form.mercPro = res.mercPro;
					this.form.mercCity = res.mercCity;
					this.form.mercArea = res.mercArea;
					this.form.mercProName = res.mercProName;
					this.form.mercCityName = res.mercCityName;
					this.form.mercAreaName = res.mercAreaName;
					this.form.businessLicenseName = res.businessLicenseName;
					this.form.businessLicenseNo = res.businessLicenseNo;
					this.form.businessLicenseStartDate = res.businessLicenseStartDate;
					this.form.businessLicenseEndDate = res.businessLicenseEndDate;
					this.form.businessLicenseAddress = res.businessLicenseAddress;
					this.form.merchantType = res.merchantType;
					//根据商户类型ID显示内容(个人和企业)
					if(this.form.merchantType==3){
						this.form.merchantText = this.merchantList[1].merchantName;
						this.licensePicShow = true;
						this.licenseNoShow = true;
						this.licenseStartDateShow = true;
						this.licenseEndDateShow = true;
						this.licenseAddressShow = true;
					}else{
						this.form.merchantText = this.merchantList[0].merchantName;
						this.licensePicShow = false;
						this.licenseNoShow = false;
						this.licenseStartDateShow = false;
						this.licenseEndDateShow = false;
						this.licenseAddressShow = false;
					}
					this.form.mccCode = res.mccCode;
					this.form.mccText = this.mccList[mccIndex]?.mccName || '请选择行业';
					this.form.areaText = res.mercAreaName ? res.mercProName + '-' + res
						.mercCityName + '-' + res.mercAreaName : '请选择地址';
					this.form.manageAddr = res.manageAddr

					// this.form.mccText = '请选择行业';
					// this.form.areaText = '请选择地址';
					console.log("this.form4444", this.form)
				}


			},
			chooseImg(type) {
				let _this = this;
				let chooseImgtype = ['album'];
				this.$selectUpload.chooseImg_(chooseImgtype).then(async res => {
					this.$tip.loading("上传中...");
					setTimeout(function() {
						_this.$tip.loaded();
					}, 10000);
					const size = res.tempFiles[0].size;

					// h5要单独压缩
					// // #ifdef H5
					// if (size < (1024 * 1024*4)) {
					// 	base64 = await this.getBase64(res.tempFilePaths[0]);
					// } else {
					// 	base64 = await this.$refs.wCompress2.start(res.tempFilePaths[0], {
					// 		pixels: 90000, // 最大分辨率，默认二百万
					// 		quality: 0.9, // 压缩质量，默认0.8
					// 		type: 'png', // 图片类型，默认jpg
					// 		base64: true // 是否返回base64，默认false，非H5有效
					// 	});
					// }
					// // #endif
					// // #ifndef H5
					// base64 = await this.getBase64(res.tempFilePaths[0]);
					// // #endif
					// let base64;
					if (size > (1024 * 1024 * 10)) {
						return this.$tip.toast('上传图片不超过10M!');
					}
					// base64 = await this.getBase64(res.tempFilePaths[0]);
					// let ocrInfo = await this.ocrGetInfo(base64, type);
					const file = res.tempFilePaths[0];
					let otherParams = {serialno : this.$storage.getStore('serialno')};
					let ocrInfo = await this.uploadApiRequest_(file, type,otherParams);
					this.$tip.loaded();
					if (ocrInfo.code == 200) {
						this.$tip.success('识别成功!');
						switch (type) {
							case 10:
								this.shopGateImage = ocrInfo.data.imgUrl;
								break;
							case 11:
								this.shopInsideImage = ocrInfo.data.imgUrl;
								break;
							case 13:
								this.cashDeskImage = ocrInfo.data.imgUrl;
								break;
							case 18:
								this.businessCreditLicenseImage = ocrInfo.data.imgUrl;
							default:
								break;
						}

					} else {
						_this.$tip.loaded();
						_this.$tip.toast(ocrInfo.msg);
					}
				}).catch(e => {
					_this.$tip.loaded();
					_this.$tip.toast(ocrInfo.msg);
				});
			},
			// 提交
			async merchantSubmit() {
				console.log(999, this.form)
				if (!this.shopGateImage || !this.shopInsideImage || !this.cashDeskImage) {
					return this.$tip.toast('请上传完整!');
				}
				if (!this.form.mercArea) {
					return this.$tip.toast('请选择地址!');
				}
				if (!this.form.mccCode) {
					return this.$tip.toast('请选择行业!');
				}
				const mercArea = this.form.manageAddr;
				const indexOfArea = mercArea.split(this.form.mercAreaName)
				const noAreaAddress = indexOfArea[1];
				if (indexOfArea[1]) {
					this.form.manageAddr = noAreaAddress;
				}
				if (!this.form.manageAddr || this.form.manageAddr.length < 6) {
					return this.$tip.toast('请输入详细地址并至少6个!');
				}
				const businessLicenseName = this.form.businessLicenseName;
				// const businessLicenseName = this.$checkStr(this.form.businessLicenseName);
				if (!businessLicenseName || businessLicenseName.length < 5 || businessLicenseName.length > 20) {
					return this.$tip.toast('请输入5-20个字的经营名称!');
				}
				if(this.form.merchantType==3){
					if(!this.businessCreditLicenseImage){
						return this.$tip.toast('请上传营业执照!');
					}
					if(!this.form.businessLicenseNo){
						return this.$tip.toast('请输入社会统一信用码');
					}
					if(!this.form.businessLicenseStartDate){
						return this.$tip.toast('请选择营业执照开始日期');
					}
					if(!this.form.businessLicenseEndDate){
						return this.$tip.toast('请选择营业执照结束日期');
					}
					if(!this.form.businessLicenseAddress){
						return this.$tip.toast('请输入营业执照经营地址');
					}
				}else{
					this.businessCreditLicenseImage = "";
					this.form.businessLicenseNo = "";
					this.form.businessLicenseStartDate = "";
					this.form.businessLicenseEndDate = "";
					this.form.businessLicenseAddress = "";
				}
				this.form.businessLicenseName = this.$checkStr(businessLicenseName);
				let params = {
					...this.form
				};
				console.log({
					params
				})
				// return
				this.$storage.setStore('merchantFormData', this.form);
				this.$emit("merchantSubmit", params, 2)
			},
			async getProvinceApiData(channelCode) {
				let res = await getProvinceApi({channelCode});
				this.provinceList = res.data;
				return res.data
			},
			async getCityApiData(code,channelCode) {
				let res = await getCityApi({
					code,channelCode
				});
				this.provinceList = res.data;
				return res.data
			},
			async getAreaApiData(code,channelCode) {
				let res = await getAreaApi({
					code,channelCode
				});
				this.provinceList = res.data;
				return res.data;
			},
			// 行业选择
			mccConfirm(e) {
				const index = e[0];
				this.form.mccCode = this.mccList[index].mccCode;
				this.form.mccText = this.mccList[index].mccName;
			},
			// 商户类型选择
			merchantConfirm(e) {
				const index = e[0];
				this.form.merchantType = this.merchantList[index].merchantType;
				this.form.merchantText = this.merchantList[index].merchantName;
				//根据商户类型ID显示内容(个人和企业)
				if(this.form.merchantType==3){
					this.licensePicShow = true;
					this.licenseNoShow = true;
					this.licenseStartDateShow = true;
					this.licenseEndDateShow = true;
					this.licenseAddressShow = true;
				}else{
					this.licensePicShow = false;
					this.licenseNoShow = false;
					this.licenseStartDateShow = false;
					this.licenseEndDateShow = false;
					this.licenseAddressShow = false;
				}
				//根据商户类型重置所属行业
				this.form.mccText = "";
				this.form.mccCode = "";
				this.form.mccName = "";
				this.getMerchMccData(this.form.merchantType);
			
			},
			async getMerchMccData(merchType) {
				const channelCode = this.channelCode;
				let res = await getMerchMcc({
					merchType, channelCode
				});
				this.mccList = res.data;
				return res.data;
			},
			// 返回
			backSubmit() {
				this.$emit("backSubmit", 0);
			},
			//去空格
			replaceSpaces(value) {
				if (value.includes(" ")) {
					return value.replace(/\s/g, "");
				} else {
					return value;
				}
			}

		}
	};
</script>

<style lang="scss">
	.identity {}

	.img-upload {
		background-color: #ffffff;
		padding: R(30px);
		padding-top: 0;

		.top-tips {
			text-align: left;
			font-size: R(20px);
			color: #C7C7C7;
			padding-top: R(40px);
		}

		.img-upload-item {

			.title {
				color: #1E1E20;
				font-size: R(22px);
				font-weight: 500;
				margin: R(20px) R(30px);
				position: relative;
			}

			.title::before {
				content: "";
				position: absolute;
				display: block;
				left: R(-20px);
				width: R(10px);
				height: R(10px);
				background-color: #1E1E20;
				border-radius: R(50%);
				margin-top: R(10px);
			}

			.box-image {
				// background-color: #DFDFE8;
				border-radius: R(10px);
				padding: R(35px) R(55px);
				width: R(338px);
				border: 1px dotted #c7c7c7;
				// height: R(250px);
				margin: 0 auto;
				position: relative;

				.bg-image {
					width: R(227px);
					height: R(116px);
				}

				.add {
					width: R(50px);
					height: R(50px);
					background-color: #3BC3FF;
					border-radius: 50%;
					text-align: center;
					font-size: R(50);
					line-height: R(45px);
					color: #ffffff;
					position: absolute;
					top: 50%;
					left: 50%; //居中
					margin-left: R(-30px);
					margin-top: R(-30px);
				}

				.bottom {
					font-size: R(15px);
					color: #C7C7C7;
					margin-top: R(20px);
				}
			}
		}


		.tips {
			text-align: center;
			margin: R(30px);
			font-size: R(25px);
			color: #1E1E20;
			font-weight: 400;
		}
	}

	.form {
		margin: R(30px) 0;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 25upx 20upx;
			font-size: 28upx;
			font-weight: 400;
			color: #262626;
			background: #fff;

			.input {
				flex: 1;
				text-align: right;
				margin-left: auto;
				font-size: 28upx;
				color: #7d7d7d;
			}

			.icon {
				width: 46upx;
				height: 46upx;
				margin-left: 20upx;
			}

			.sendCode {
				margin-left: 10upx;
			}
		}


		.next {
			margin: 40upx auto 0;
			width: 581upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			// background: $themeColor;
			// border: 1upx solid $themeColor;
			font-size: 30upx;
			font-weight: 400;
			color: #ffffff;
			background-color: #3BC3FF;
			border-radius: 10upx;
		}


		.sub-tips {
			padding: 28upx 30upx;
			font-size: 26upx;
			font-weight: 400;
			color: #999999;
		}
	}

	.tips {
		font-size: R(22px);
		color: #A6A6A6;
		margin: R(30px) R(20px);
	}

	.card-btn {
		.button {
			width: 45%;
			margin: R(30px);
			flex: 1;
		}
	}
</style>